<template>
  <div class="nine-cell-playground">
    <div class="svg-canvas">
      <svg version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           width="591px"
           height="382px"
      >
        <!--      <image x="0" y="0" width="100%" height="100%"-->
        <!--             xlink:href="../../assets/image/playerGround/nine_cell.png"-->
        <!--             preserveAspectRatio="xMinYMin meet"/>-->
        <image x="0" y="0" width="100%" height="100%"
               xlink:href="../../assets/image/playerGround/playground.png"
               preserveAspectRatio="xMidYMid none"/>
        <g  v-for="item in reverseZoneData">
          <rect  :x="item.x" :y="item.y" width="33%" height="33%" fill="red" stroke="#1A936F" stroke-width="2" :fill-opacity="item.passRatio/100"/>
          <text  v-show="!item.isRoseShow"  :x="item.x" :y="item.y" dx="35" dy="70" fill="black" font-size="25" font-weight="bold">{{item.passTotal}}/{{item.passRatio + '%'}}</text>
        </g>
      </svg>
    </div>
    <div class="rose-container">
      <div class="rose-cell"
           v-for="(item,index) in reverseZoneData"
           @mouseenter="showRose(item,index)"
           @mouseleave="closeRose(item,index)">
        <RosePass :roseData="item.roseData"></RosePass>
      </div>
    </div>
  </div>
</template>

<script>
  import RosePass from "../ant_v/allPass/RosePass";
  export default {
    name: "NineCellPlayGround",
    props:{
      zoneData:{
        type:Array,
        default(){
          return []
        }
      }
    },
    data(){
      return {
        // zoneData:[
        //   {zone:1,x:"0", y:"0",rate:'32/17.2%', ratio:0.1, isRoseShow:false,roseData:[
        //       { angle: '0 ~ 30', value: 10, type:'成功传球'},
        //       { angle: '31 ~ 60', value: 4,type:'成功传球'},
        //       { angle: '61 ~ 90', value: 11,type:'成功传球'},
        //       { angle: '91 ~ 120', value: 5,type:'成功传球'},
        //       { angle: '121 ~ 150', value: 12,type:'成功传球'},
        //       { angle: '151 ~ 180', value: 5,type:'成功传球'},
        //       { angle: '-180 ~ -151', value: 9,type:'成功传球'},
        //       { angle: '-150 ~ -121', value: 6,type:'成功传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'成功传球'},
        //       { angle: '-90 ~ -61', value: 10,type:'成功传球'},
        //       { angle: '-60 ~ -31', value: 5,type:'成功传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'成功传球'},
        //       { angle: '0 ~ 30', value: 5, type:'失败传球'},
        //       { angle: '31 ~ 60', value: 10,type:'失败传球'},
        //       { angle: '61 ~ 90', value: 5,type:'失败传球'},
        //       { angle: '91 ~ 120', value: 12,type:'失败传球'},
        //       { angle: '121 ~ 150', value: 5,type:'失败传球'},
        //       { angle: '151 ~ 180', value: 15,type:'失败传球'},
        //       { angle: '-180 ~ -151', value: 5,type:'失败传球'},
        //       { angle: '-150 ~ -121', value: 7,type:'失败传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'失败传球'},
        //       { angle: '-90 ~ -61', value: 6,type:'失败传球'},
        //       { angle: '-60 ~ -31', value: 9,type:'失败传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'失败传球'},
        //     ]},
        //   {zone:2,x:"33.5%", y:"0",rate:'32/17.2%', ratio:0.2,isRoseShow:false,roseData:[
        //       { angle: '0 ~ 30', value: 10, type:'成功传球'},
        //       { angle: '31 ~ 60', value: 4,type:'成功传球'},
        //       { angle: '61 ~ 90', value: 11,type:'成功传球'},
        //       { angle: '91 ~ 120', value: 5,type:'成功传球'},
        //       { angle: '121 ~ 150', value: 12,type:'成功传球'},
        //       { angle: '151 ~ 180', value: 5,type:'成功传球'},
        //       { angle: '-180 ~ -151', value: 9,type:'成功传球'},
        //       { angle: '-150 ~ -121', value: 6,type:'成功传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'成功传球'},
        //       { angle: '-90 ~ -61', value: 10,type:'成功传球'},
        //       { angle: '-60 ~ -31', value: 5,type:'成功传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'成功传球'},
        //       { angle: '0 ~ 30', value: 5, type:'失败传球'},
        //       { angle: '31 ~ 60', value: 10,type:'失败传球'},
        //       { angle: '61 ~ 90', value: 5,type:'失败传球'},
        //       { angle: '91 ~ 120', value: 12,type:'失败传球'},
        //       { angle: '121 ~ 150', value: 5,type:'失败传球'},
        //       { angle: '151 ~ 180', value: 15,type:'失败传球'},
        //       { angle: '-180 ~ -151', value: 5,type:'失败传球'},
        //       { angle: '-150 ~ -121', value: 7,type:'失败传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'失败传球'},
        //       { angle: '-90 ~ -61', value: 6,type:'失败传球'},
        //       { angle: '-60 ~ -31', value: 9,type:'失败传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'失败传球'},
        //     ]},
        //   {zone:3,x:"67%", y:"0",rate:'44/17.2%', ratio:0.3,isRoseShow:false,roseData:[
        //       { angle: '0 ~ 30', value: 10, type:'成功传球'},
        //       { angle: '31 ~ 60', value: 4,type:'成功传球'},
        //       { angle: '61 ~ 90', value: 11,type:'成功传球'},
        //       { angle: '91 ~ 120', value: 5,type:'成功传球'},
        //       { angle: '121 ~ 150', value: 12,type:'成功传球'},
        //       { angle: '151 ~ 180', value: 5,type:'成功传球'},
        //       { angle: '-180 ~ -151', value: 9,type:'成功传球'},
        //       { angle: '-150 ~ -121', value: 6,type:'成功传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'成功传球'},
        //       { angle: '-90 ~ -61', value: 10,type:'成功传球'},
        //       { angle: '-60 ~ -31', value: 5,type:'成功传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'成功传球'},
        //       { angle: '0 ~ 30', value: 5, type:'失败传球'},
        //       { angle: '31 ~ 60', value: 10,type:'失败传球'},
        //       { angle: '61 ~ 90', value: 5,type:'失败传球'},
        //       { angle: '91 ~ 120', value: 12,type:'失败传球'},
        //       { angle: '121 ~ 150', value: 5,type:'失败传球'},
        //       { angle: '151 ~ 180', value: 15,type:'失败传球'},
        //       { angle: '-180 ~ -151', value: 5,type:'失败传球'},
        //       { angle: '-150 ~ -121', value: 7,type:'失败传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'失败传球'},
        //       { angle: '-90 ~ -61', value: 6,type:'失败传球'},
        //       { angle: '-60 ~ -31', value: 9,type:'失败传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'失败传球'},
        //     ]},
        //   {zone:4,x:"0", y:"33.5%",rate:'32/17.2%', ratio:0.4,isRoseShow:false,roseData:[
        //       { angle: '0 ~ 30', value: 10, type:'成功传球'},
        //       { angle: '31 ~ 60', value: 4,type:'成功传球'},
        //       { angle: '61 ~ 90', value: 11,type:'成功传球'},
        //       { angle: '91 ~ 120', value: 5,type:'成功传球'},
        //       { angle: '121 ~ 150', value: 12,type:'成功传球'},
        //       { angle: '151 ~ 180', value: 5,type:'成功传球'},
        //       { angle: '-180 ~ -151', value: 9,type:'成功传球'},
        //       { angle: '-150 ~ -121', value: 6,type:'成功传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'成功传球'},
        //       { angle: '-90 ~ -61', value: 10,type:'成功传球'},
        //       { angle: '-60 ~ -31', value: 5,type:'成功传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'成功传球'},
        //       { angle: '0 ~ 30', value: 5, type:'失败传球'},
        //       { angle: '31 ~ 60', value: 10,type:'失败传球'},
        //       { angle: '61 ~ 90', value: 5,type:'失败传球'},
        //       { angle: '91 ~ 120', value: 12,type:'失败传球'},
        //       { angle: '121 ~ 150', value: 5,type:'失败传球'},
        //       { angle: '151 ~ 180', value: 15,type:'失败传球'},
        //       { angle: '-180 ~ -151', value: 5,type:'失败传球'},
        //       { angle: '-150 ~ -121', value: 7,type:'失败传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'失败传球'},
        //       { angle: '-90 ~ -61', value: 6,type:'失败传球'},
        //       { angle: '-60 ~ -31', value: 9,type:'失败传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'失败传球'},
        //     ]},
        //   {zone:5,x:"33.5%", y:"33.5%",rate:'32/17.2%', ratio:0.5,isRoseShow:false,roseData:[
        //       { angle: '0 ~ 30', value: 10, type:'成功传球'},
        //       { angle: '31 ~ 60', value: 4,type:'成功传球'},
        //       { angle: '61 ~ 90', value: 11,type:'成功传球'},
        //       { angle: '91 ~ 120', value: 5,type:'成功传球'},
        //       { angle: '121 ~ 150', value: 12,type:'成功传球'},
        //       { angle: '151 ~ 180', value: 5,type:'成功传球'},
        //       { angle: '-180 ~ -151', value: 9,type:'成功传球'},
        //       { angle: '-150 ~ -121', value: 6,type:'成功传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'成功传球'},
        //       { angle: '-90 ~ -61', value: 10,type:'成功传球'},
        //       { angle: '-60 ~ -31', value: 5,type:'成功传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'成功传球'},
        //       { angle: '0 ~ 30', value: 5, type:'失败传球'},
        //       { angle: '31 ~ 60', value: 10,type:'失败传球'},
        //       { angle: '61 ~ 90', value: 5,type:'失败传球'},
        //       { angle: '91 ~ 120', value: 12,type:'失败传球'},
        //       { angle: '121 ~ 150', value: 5,type:'失败传球'},
        //       { angle: '151 ~ 180', value: 15,type:'失败传球'},
        //       { angle: '-180 ~ -151', value: 5,type:'失败传球'},
        //       { angle: '-150 ~ -121', value: 7,type:'失败传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'失败传球'},
        //       { angle: '-90 ~ -61', value: 6,type:'失败传球'},
        //       { angle: '-60 ~ -31', value: 9,type:'失败传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'失败传球'},
        //     ]},
        //   {zone:6,x:"67%", y:"33.5%",rate:'32/17.2%', ratio:0.6,isRoseShow:false,roseData:[
        //       { angle: '0 ~ 30', value: 10, type:'成功传球'},
        //       { angle: '31 ~ 60', value: 4,type:'成功传球'},
        //       { angle: '61 ~ 90', value: 11,type:'成功传球'},
        //       { angle: '91 ~ 120', value: 5,type:'成功传球'},
        //       { angle: '121 ~ 150', value: 12,type:'成功传球'},
        //       { angle: '151 ~ 180', value: 5,type:'成功传球'},
        //       { angle: '-180 ~ -151', value: 9,type:'成功传球'},
        //       { angle: '-150 ~ -121', value: 6,type:'成功传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'成功传球'},
        //       { angle: '-90 ~ -61', value: 10,type:'成功传球'},
        //       { angle: '-60 ~ -31', value: 5,type:'成功传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'成功传球'},
        //       { angle: '0 ~ 30', value: 5, type:'失败传球'},
        //       { angle: '31 ~ 60', value: 10,type:'失败传球'},
        //       { angle: '61 ~ 90', value: 5,type:'失败传球'},
        //       { angle: '91 ~ 120', value: 12,type:'失败传球'},
        //       { angle: '121 ~ 150', value: 5,type:'失败传球'},
        //       { angle: '151 ~ 180', value: 15,type:'失败传球'},
        //       { angle: '-180 ~ -151', value: 5,type:'失败传球'},
        //       { angle: '-150 ~ -121', value: 7,type:'失败传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'失败传球'},
        //       { angle: '-90 ~ -61', value: 6,type:'失败传球'},
        //       { angle: '-60 ~ -31', value: 9,type:'失败传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'失败传球'},
        //     ]},
        //   {zone:7,x:"0", y:"67%",rate:'4/17.2%', ratio:0.7,isRoseShow:false,roseData:[
        //       { angle: '0 ~ 30', value: 10, type:'成功传球'},
        //       { angle: '31 ~ 60', value: 4,type:'成功传球'},
        //       { angle: '61 ~ 90', value: 11,type:'成功传球'},
        //       { angle: '91 ~ 120', value: 5,type:'成功传球'},
        //       { angle: '121 ~ 150', value: 12,type:'成功传球'},
        //       { angle: '151 ~ 180', value: 5,type:'成功传球'},
        //       { angle: '-180 ~ -151', value: 9,type:'成功传球'},
        //       { angle: '-150 ~ -121', value: 6,type:'成功传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'成功传球'},
        //       { angle: '-90 ~ -61', value: 10,type:'成功传球'},
        //       { angle: '-60 ~ -31', value: 5,type:'成功传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'成功传球'},
        //       { angle: '0 ~ 30', value: 5, type:'失败传球'},
        //       { angle: '31 ~ 60', value: 10,type:'失败传球'},
        //       { angle: '61 ~ 90', value: 5,type:'失败传球'},
        //       { angle: '91 ~ 120', value: 12,type:'失败传球'},
        //       { angle: '121 ~ 150', value: 5,type:'失败传球'},
        //       { angle: '151 ~ 180', value: 15,type:'失败传球'},
        //       { angle: '-180 ~ -151', value: 5,type:'失败传球'},
        //       { angle: '-150 ~ -121', value: 7,type:'失败传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'失败传球'},
        //       { angle: '-90 ~ -61', value: 6,type:'失败传球'},
        //       { angle: '-60 ~ -31', value: 9,type:'失败传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'失败传球'},
        //     ]},
        //   {zone:8,x:"33.5%", y:"67%",rate:'4/17.2%', ratio:0.8,isRoseShow:false,roseData:[
        //       { angle: '0 ~ 30', value: 10, type:'成功传球'},
        //       { angle: '31 ~ 60', value: 4,type:'成功传球'},
        //       { angle: '61 ~ 90', value: 11,type:'成功传球'},
        //       { angle: '91 ~ 120', value: 5,type:'成功传球'},
        //       { angle: '121 ~ 150', value: 12,type:'成功传球'},
        //       { angle: '151 ~ 180', value: 5,type:'成功传球'},
        //       { angle: '-180 ~ -151', value: 9,type:'成功传球'},
        //       { angle: '-150 ~ -121', value: 6,type:'成功传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'成功传球'},
        //       { angle: '-90 ~ -61', value: 10,type:'成功传球'},
        //       { angle: '-60 ~ -31', value: 5,type:'成功传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'成功传球'},
        //       { angle: '0 ~ 30', value: 5, type:'失败传球'},
        //       { angle: '31 ~ 60', value: 10,type:'失败传球'},
        //       { angle: '61 ~ 90', value: 5,type:'失败传球'},
        //       { angle: '91 ~ 120', value: 12,type:'失败传球'},
        //       { angle: '121 ~ 150', value: 5,type:'失败传球'},
        //       { angle: '151 ~ 180', value: 15,type:'失败传球'},
        //       { angle: '-180 ~ -151', value: 5,type:'失败传球'},
        //       { angle: '-150 ~ -121', value: 7,type:'失败传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'失败传球'},
        //       { angle: '-90 ~ -61', value: 6,type:'失败传球'},
        //       { angle: '-60 ~ -31', value: 9,type:'失败传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'失败传球'},
        //     ]},
        //   {zone:9,x:"67%", y:"67%",rate:'44/17.2%', ratio:0.9,isRoseShow:false,roseData:[
        //       { angle: '0 ~ 30', value: 10, type:'成功传球'},
        //       { angle: '31 ~ 60', value: 4,type:'成功传球'},
        //       { angle: '61 ~ 90', value: 11,type:'成功传球'},
        //       { angle: '91 ~ 120', value: 5,type:'成功传球'},
        //       { angle: '121 ~ 150', value: 12,type:'成功传球'},
        //       { angle: '151 ~ 180', value: 5,type:'成功传球'},
        //       { angle: '-180 ~ -151', value: 9,type:'成功传球'},
        //       { angle: '-150 ~ -121', value: 6,type:'成功传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'成功传球'},
        //       { angle: '-90 ~ -61', value: 10,type:'成功传球'},
        //       { angle: '-60 ~ -31', value: 5,type:'成功传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'成功传球'},
        //       { angle: '0 ~ 30', value: 5, type:'失败传球'},
        //       { angle: '31 ~ 60', value: 10,type:'失败传球'},
        //       { angle: '61 ~ 90', value: 5,type:'失败传球'},
        //       { angle: '91 ~ 120', value: 12,type:'失败传球'},
        //       { angle: '121 ~ 150', value: 5,type:'失败传球'},
        //       { angle: '151 ~ 180', value: 15,type:'失败传球'},
        //       { angle: '-180 ~ -151', value: 5,type:'失败传球'},
        //       { angle: '-150 ~ -121', value: 7,type:'失败传球'},
        //       { angle: '-120 ~ -91', value: 5,type:'失败传球'},
        //       { angle: '-90 ~ -61', value: 6,type:'失败传球'},
        //       { angle: '-60 ~ -31', value: 9,type:'失败传球'},
        //       { angle: '-30 ~ 0', value: 5,type:'失败传球'},
        //     ]},
        // ],
      }
    },
    components:{
      RosePass
    },
    methods:{
      showRose(item,index){
        // console.log('showRose');
        //隐藏'传球成功率',这样直接修改行不通,这里是计算属性返回的reverseZoneData，想要修改必须调用setter
        // item.isRoseShow = true;


        //注意！下面的操作不是赋值，而是把index这个变量传入到reverseZoneData的set函数中
        this.reverseZoneData = index;
        //找到鼠标进入的zone区域
        const obj = document.getElementsByClassName("rose-cell")[index];
        //修改层级
        obj.style.zIndex = 3;
      },
      closeRose(item,index){
        // console.log('closeRose');
        // item.isRoseShow = false;
        this.reverseZoneData = index;
        const obj = document.getElementsByClassName("rose-cell")[index];
        obj.style.zIndex = 1
      },
    },
    computed:{
      //修改zoneData中roseData的数组元素顺序
      reverseZoneData:{
        get:function() {
            return this.zoneData.map(zone=>{
              return {
                ...zone,
                ratio: parseInt(zone.ratio * 100) + '%',
                roseData:zone.roseData.reverse()}
          })
        },
        set:function(index) {
          //这里的index就是showRose方法中 this.reverseZoneData = index 所传入的
          // console.log(index);
          this.zoneData[index]['isRoseShow'] = !this.zoneData[index]['isRoseShow']
        }
      }
    },
    mounted() {

    }
  }
</script>

<style scoped lang="scss">
   .nine-cell-playground {
     position: relative;
     width: 591px;
     height: 383px;
     margin-top: 13px;
     .svg-canvas {
       position: relative;
       z-index: 2;
       pointer-events: none;
     }
     .rose-container {
       display:flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       position: absolute;
       /*z-index:4;*/
       left: 1px;
       top:0;
       width: 590px;
       height: 383px;
       /*background-color: yellow;*/
       .rose-cell {
         /*background-color: red;*/
         width: 176px;
         height: 114px;
         /*margin-left: 10px;*/
         z-index: 1;
         /*pointer-events: none;*/
       }
     }
   }
</style>